<template>
	<view :class="currentTheme">
		<a-nabbar name="个人信息" />
		<view class="u-padding-32" v-if="form">
			<view class="u-flex u-row-center">
				<view class="u-text-center">
					<view class="u-position-relative" @click="changeAvatar">
            <item-image :type="'1'" :img="form.avatar"  :size="160"   />
						<view class="avatar-mask u-flex u-row-center">
							<u-icon name="xiangji" color="#ffffff" size="43"  custom-prefix="custom-icon"></u-icon>
						</view>
					</view>
					<text class="box-title u-font-24">点击修改</text>
				</view>
			</view>
			<view class="u-margin-bottom-20 u-flex u-row-between">
				<text class="box-title u-font-32">上传图片</text>
				<text class="u-font-24 u-margin-top-20 tips">最多可上传6张</text>
			</view>
			<uploader ref="image" :max-count="6"  :bgColor="currentThemeObj.backgroundSecondColor" 
			:list="form.showPic" @getImgStr="getImgStr" @uploaded="getUpload"></uploader>
			<!-- 表单 -->
			<view class="u-margin-top-42">
				<itemBox>
					<view class="u-padding-left-30 u-padding-right-20">
						<label-box label="昵称" labelWidth="130">							
							<u-input  maxlength="20" v-model="form.nickname" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
							placeholder="请输入联系人称呼方式" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
						</label-box>
						<label-box label="微信号" labelWidth="130">							
							<u-input  maxlength="20" v-model="form.personalWechat"  :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
							placeholder="请输入微信号" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
						</label-box>
						<label-box label="联系电话" labelWidth="130">							
							<u-input v-model="form.phone" type="number" maxlength="11" :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
							placeholder="请输入联系人电话" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
						</label-box>
					</view>
					<view class="u-padding-left-30">
							<label-box label="标签" labelWidth="130"></label-box>
							<view class="u-flex u-flex-wrap u-margin-top-20">
								<view class="u-margin-bottom-26 u-margin-right-36" v-for="(c,i) in form.tags" :key="i" >
									<view class="my-tag">
										{{c}}
										<view class="my-tag-delete" @click="tagClick(i)">
											<u-icon name="guanbi" size="20" custom-prefix="index-custom-icon" color="#333333"></u-icon>
										</view>
									</view>
								</view>
							</view>
					</view>
					<u-line color="rgba(0, 0, 0, 0.1)"></u-line>
					<view class="add-btn">
						<ItemBtn radius="50"  width="100%" height="88" :type="'plain'" @click="addTag"><text>添加标签</text></ItemBtn>
					</view>
				</itemBox>
			</view>
			<fixed-team btnText="保存" @btnClick="setInfo"></fixed-team>
		</view>
		<u-modal v-model="isEdit" maskCloseAble title="添加标签" :show-confirm-button="false"
			:content-style="{'backgroundColor':'white'}"
			:title-style="{'backgroundColor':'white','color':'#333333','padding':'25rpx 0','borderBottom':'1rpx solid rgba(255,255,255,0.1)'}">
			<view>
				<view class="u-padding-left-30 u-padding-right-30">
					<label-box label="标签">
						<u-input  :clearable="false" border  maxlength="20" 
							v-model="tagValue"
							:borderColor="currentThemeObj.inputBorderColor"
							 :placeholder-style="`color:${currentThemeObj.placeholderColor}`" placeholder="请输入标签名"  />
					</label-box>
					<view class="u-padding-bottom-34 u-padding-top-46">
						<item-btn @click="tagBlur" width="100%" height="88">添加</item-btn>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import uploader from '@/components/upload/upload.vue'
	import { getOssUrl } from "@/api/updataFile";
	import {userPersonalInformation} from '@/api/user.js'
import ItemBtn from '../../components/item-btn/item-btn.vue';
	export default {
		components: {
			uploader,
			ItemBtn
		},
		data() {
			return {
				form:null,
				uploadFlag:true,
				isEdit:false,
				tagValue:''
			};
		},
		onLoad() {
			uni.$on('uAvatarCropper', path => {
				getOssUrl(path).then(({url})=>{
					this.form.avatar = url
				})
			})
			this.form = this.loginForm || {};
			this.form.userType = '';
			const tags = this.form.personalLabel ? this.form.personalLabel.split(',') : [] //标签
			this.$set(this.form,'tags',tags)
		},
		onUnload() {
			uni.$off('uAvatarCropper')
		},
		methods: {
			//上传的图片
			getImgStr(str){
				this.form.showPic = str;
			},
			//监听上传图片
			getUpload(flag){
				this.uploadFlag = flag;
			},
			setInfo(){
				if(!this.uploadFlag) {
					this.$u.toast('图片上传中')
					return false;
				}
				const {personalWechat,nickname,phone,address,storeNumber} = this.form;
				//const wxreg = /^[(a-zA-Z)|_]{1}[-_a-zA-Z0-9]{5,19}$/
				if(!personalWechat){ //&&!wxreg.test(wxId)
					this.$u.toast('微信号码不能为空')
					return false;
				}
				if(phone&&!this.$u.test.mobile(phone)){
					this.$u.toast('手机号码不正确')
					return false;
				}
				if(!nickname){
					this.$u.toast('昵称不能为空')
					return false;
				}
				this.loading = true;
				userPersonalInformation(this.form).then(res=>{
					this.loading = false;
					this.routeBack('提交成功')
					this.$store.dispatch("getInfo")
				}).catch(()=>{
					this.loading = false;
				})
			},
			
			//修改头像
			changeAvatar(){
				uni.chooseImage({
					count: 1, 
					success(res) {
						const src = res.tempFilePaths[0];
						uni.navigateTo({
							url:'/pagesA/u-avatar-cropper/u-avatar-cropper?src='+src
						})
					}
				});
			},
			tagClick(index){
				const tags = this.form.tags.filter((val,i)=>i!==index);
				this.$set(this.form,'personalLabel',tags.join(','))
				this.$set(this.form,'tags',tags)
			},
			addTag(){
				this.isEdit = true;
			},
			tagBlur(){
				if(!this.tagValue){
					this.$u.toast('请输入标签名')
					return false;
				}
				this.form.tags.push(this.tagValue);
				this.$set(this.form,'personalLabel',this.form.tags.join(','))
				this.isEdit = false;
				this.tagValue = ''
			}
		},
	}
</script>

<style lang="scss" scoped>
.save-btn{
	padding: 100rpx 0;
}
.form-label{
	width: 210rpx;
	color: white;
	font-size: 32rpx;
}
.btn-style{
	width: 260rpx;
	line-height: 70rpx;
	text-align: center;
	margin: 0 auto;
	height: 70rpx;
	border-radius: 50rpx;
	background-color: #765CFE;
	color: white;
}
.tips{
	color: #9598A4;
}
.avatar-mask{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: rgba(22, 19, 36, 0.5);
	right: 0;
	border-radius: 100%;
}

.addTag{
	width:126rpx ;
	height: 52rpx;
	border:1rpx solid #423F4F;
	border-radius: 100rpx;
	text-align: center;
	line-height: 48rpx;
	box-sizing: border-box;
	margin-right: 10rpx;
	margin-top: 10rpx;
	background-color:var(--theme-color) ;
}
.add-btn{
	padding: 28rpx 20rpx;
}
.my-tag{
	min-width:180rpx ;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 20rpx 0 20rpx;
	background: var(--theme-color) ;
	color: #ffffff;
	border-radius: 32px;
	text-align: center;
	position: relative;
	.my-tag-delete{
		position: absolute;
		right: -10rpx;
		top: -20rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #E6E6E6;
		border-radius: 100%;
	}
}

</style>
